<template>
  <div>
    <div class="bg-wrap">
      <img
        :src="require(`@/assets/bg/${bgArr[currentBg]}.png`)"
        alt=""
        srcset=""
        :class="['bg-img',clickFlag ? 'scale' : '']"
      >

    </div>
    <div
      class="changeBackground"
      @click="changeBackground"
    />
    <router-view />
  </div>
</template>

<script>
/**
 * @description 创建背景图片数组
 * @param {Number} length 图片张数
 * @returns [Array]
 */
const creatBgArr = (length) => {
  const arr = []
  for (let index = 0; index < length; index++) {
    arr.push(`bg_${index + 1}`)
  }
  return arr
}
export default {
  data() {
    return {
      bgArr: creatBgArr(16),
      currentBg: 0,
      rotate: 360,
      clickFlag: false,
    }
  },
  created() {
    this.currentBg = Number(localStorage.getItem('currentBg')) || 0
  },
  methods: {
    changeBackground() {
      this.clickFlag = true
      localStorage.setItem('currentBg', this.currentBg + 1)
      const changeBackgroundDom = document.querySelector('.changeBackground')
      changeBackgroundDom.style = `transform:rotate(${this.rotate}deg)`
      this.rotate += 360
      setTimeout(() => {
        this.clickFlag = false
        this.currentBg++
        if (this.currentBg === this.bgArr.length - 1) {
          this.currentBg = 0
        }
      }, 500)
    },
  },
}
</script>

<style lang="less" scoped>
.changeBackground {
  position: fixed;
  z-index: 9999;
  bottom: 50px;
  right: 80px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2) url('../assets/change-bg.png') no-repeat;
  background-size: 100%;
  transition: all 0.4s;
  cursor: pointer;
  &:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
}
.bg-wrap {

  position: absolute;
  display: block;
  object-fit: cover;
  opacity: 1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  transition: all 0.4s;
  .bg-img {
    position: absolute;
    display: block;
    object-fit: cover;
    opacity: 1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    transition: all 0.4s;
  }
  img {
    vertical-align: center;
    border-style: none;
  }
}
.scale {
  transform: scale(1.15);
}
</style>
